
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
      >
        <template
          slot="tradeDate"
          slot-scope="scope"
        >
          {{scope.row.beginTime}} ~ {{scope.row.endTime}}
        </template>
        <template slot="menuRight">
          <el-button
            @click="exportClick"
          >导出</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, listoperators, dataExport } from '@/api/rca/swckmanmadeclearaccountotherservicereport'
import { tableOption, startDate, endDate } from '@/const/crud/rca/swckmanmadeclearaccountotherservicereport9'
import { handleExcelResponse, getQueryString } from "@/util/util";
import { mapGetters } from 'vuex'

export default {
  name: 'swckmanmadeclearaccountotherservicereport',
  data () {
    return {
      searchForm: {
        tradeDate: [],
      },
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      baseCode: '9' //0代表应急纸票和退票清分报表 1代表人工协议清分对账报表退换票 9代表人工协议清分对账报表（9号线） 54代表人工协议清分对账报表（14号线）
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList () {
      return {
      };
    }
  },
  methods: {
    async getList (page, params) {
      this.tableLoading = true;
      try {
        const [startDate, endDate] = this.searchForm.tradeDate || [];
        const response = await fetchList(Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm,
          { startDate, endDate },
        ))
        this.tableData = response.data.data;
        this.tableLoading = false;
	      this.$nextTick(() => {
          this.$refs.crud.doLayout();
        });
      } catch (e) {
        this.tableLoading = false;
      };
    },
    async exportClick (row) {
      this.dataExport();
    },
    async dataExport () {
      const { tradeDate = [] } = this.searchForm;
      const [startDate, endDate] = tradeDate;
      const baseCode = this.baseCode;
      if (!startDate || !endDate) {
        this.$message.error("日期范围不能为空");
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      })
      try {
        const res = await dataExport(Object.assign({}, this.searchForm, { startDate, endDate, baseCode }));
        handleExcelResponse(res);
      } finally {
        loading.close();
      }
    },
    async searchChange (form, done) {
      this.searchForm = { ...form };
      const [startDate, endDate] = this.searchForm.tradeDate || [];
      if (!startDate || !endDate) {
        this.$message.error("日期范围不能为空");
        done();
        return;
      }
      try {
        await this.getList(this.page, this.searchForm);
      } finally {
        done();
      }
    },
    refreshChange () {
      this.getList(this.page)
    },
    searchReset () {
      this.page.currentPage = 1
      this.getList(this.page);
    },
  }
}
</script>
